<template>
    <div class="box" ref="droptarget"></div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
let droptarget = ref();
onMounted(() => {
    const handleEvent = (event) =>{
        event.preventDefault();
        
        console.log(event);
    }
    // droptarget.value.addEventListener("dragenter", handleEvent);
    // droptarget.value.addEventListener("dragover", handleEvent);
    droptarget.value.addEventListener("drop", handleEvent);
    // droptarget.value.addEventListener("dragleave", handleEvent);
})
</script>

<style lang="less" scoped>
.box {
    width: 400px;
    height: 100px;
    background-color: #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px red;
}
</style>